<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>Skywalking UI</title>
    <script>
        window.instanceId = 0;
        window.startTime = 0;
    </script>
    <script data-main="/instance/instance" src="/webjars/requirejs/2.3.3/require.min.js"></script>
    <link href="\webjars\bootstrap-daterangepicker\2.1.24\css\bootstrap-daterangepicker.css" rel="stylesheet">
    <link href="/webjars/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="/webjars/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
    <link href="/webjars/animate.css/3.5.2/animate.css" rel="stylesheet">
    <link href="/public/css/style.css" rel="stylesheet">
    <style>
        .operation-box {
            margin-top: 10px;
            border-radius: 5px;
            margin: 1px 1px;
            border: 1px solid #b8b8b9;
            padding: 5px 5px 5px
        }

        .operation-panel {
            text-align: left;
            margin: 5px 10px
        }

        .operationTitle h5 {
            display: inline-block;
            font-size: 14px;
            margin: 0 0 7px;
            padding: 0;
            text-overflow: ellipsis;
            float: left;
            text-transform: uppercase;
        }

        .operation-context {
        }

        .info-key {
            text-align: right;
        }

        .context-item {
        }

        .info-value {
            text-align: left;
            padding-left: 2px;
        }

        .graphOpertion {
            margin: 5px;
            padding: 5px
        }
    </style>
</head>

<body style="background-color: #ffffff">
<div class="container-fluid">
    <div class="row white-bg">
        <div class="col-lg-2" style="padding-left: 15px">
            <a href="#" class="navbar-brand"
               style="padding: 0; background: url(/public/img/logo.png) no-repeat center center; background-size: 128px 30px; width: 128px;"></a>
        </div>
    </div>
    <div class="row gray-bg" style="padding: 10px 10px 20px; ">
        <div class="row  white-bg" style="margin-right:10px; margin-left:10px">
            <div class="col-lg-3 col-sm-4" style="padding: 10px;">
                <div class="row operation-box">
                    <div class="row operation-panel">
                        <div class="col-lg-12 col-sm-12 operationTitle">
                            <h5>Machine</h5>
                        </div>
                        <div class="col-lg-12 col-sm-12 operation-context" id="machineInfoDiv">
                        </div>
                    </div>
                    <div class="row operation-panel">
                        <div class="col-lg-12  col-sm-12 operationTitle">
                            <h5>Time</h5>
                        </div>
                        <div class="col-lg-12  col-sm-12 operation-context" style="margin-bottom:20px">
                            <input id="startTimeInput" type="text" name="daterange"/>
                            <input id="autoUpdate" type="checkbox" style="margin-right:5px">auto update</input>
                        </div>
                    </div>
                    <div class="row operation-panel">
                        <div class="col-lg-12  col-sm-12 operationTitle">
                            <h5>Select Metrics</h5>
                        </div>
                        <div class="col-lg-12  col-sm-12 operation-context" id="metricSelectorDiv">

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-sm-8 white-bg" style="margin-bottom:5px" id="metricCanvasDiv">
            </div>
        </div>
    </div>
</body>

</html>
